<template>
  <div class="guide-page">
    <h2 class="page-title">使用指南</h2>
    
    <el-card class="guide-card">
      <h3>平台介绍</h3>
      <p>校园失物招领云平台是为校园师生提供的一个便捷的失物招领服务平台。通过本平台，您可以发布寻物启事、失物招领信息，也可以查找和认领他人发布的物品。</p>
      
      <h3>如何使用</h3>
      <el-collapse>
        <el-collapse-item title="发布寻物启事" name="1">
          <ol>
            <li>点击顶部导航栏的"发布信息"</li>
            <li>选择"寻物启事"类型</li>
            <li>填写物品信息，包括名称、丢失时间、地点等</li>
            <li>上传物品照片（可选）</li>
            <li>填写联系方式</li>
            <li>点击"发布"按钮完成发布</li>
          </ol>
        </el-collapse-item>
        
        <el-collapse-item title="发布失物招领" name="2">
          <ol>
            <li>点击顶部导航栏的"发布信息"</li>
            <li>选择"失物招领"类型</li>
            <li>填写物品信息，包括名称、拾获时间、地点等</li>
            <li>上传物品照片（建议上传，便于失主辨认）</li>
            <li>填写联系方式</li>
            <li>点击"发布"按钮完成发布</li>
          </ol>
        </el-collapse-item>
        
        <el-collapse-item title="查找物品" name="3">
          <ol>
            <li>点击顶部导航栏的"寻物启事"或"失物招领"</li>
            <li>使用搜索框输入关键词搜索</li>
            <li>使用筛选条件（分类、时间、地点等）缩小范围</li>
            <li>浏览物品列表，点击感兴趣的物品查看详情</li>
          </ol>
        </el-collapse-item>
        
        <el-collapse-item title="认领物品" name="4">
          <ol>
            <li>找到您丢失的物品后，点击"申请认领"按钮</li>
            <li>填写认领信息，提供能证明物品归属的描述</li>
            <li>等待发布者审核</li>
            <li>审核通过后，按照约定方式与发布者联系并领取物品</li>
            <li>领取后，请确认完成认领流程</li>
          </ol>
        </el-collapse-item>
      </el-collapse>
      
      <h3>注意事项</h3>
      <ul>
        <li>请确保发布的信息真实有效</li>
        <li>请勿发布与失物招领无关的信息</li>
        <li>个人信息仅用于失物招领联系，请注意保护隐私</li>
        <li>建议在公共场所进行物品交接</li>
        <li>如遇到问题，请联系平台管理员</li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserGuide'
}
</script>

<style scoped>
.guide-page {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  color: var(--text-primary);
}

.guide-card {
  margin-bottom: 20px;
}

.guide-card h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 10px;
}

.guide-card p {
  line-height: 1.6;
  color: var(--text-secondary);
}

.guide-card ul, .guide-card ol {
  padding-left: 20px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.guide-card li {
  margin-bottom: 8px;
}
</style> 